<template>
  <div style="padding: 10px;width: 100%">
    <!--  搜索区   -->
    <div style="margin: 10px 0;padding-left: 10px" size="normal">
      <el-button type="primary" size="normal" @click="load">刷新</el-button>
      <el-button type="primary" size="normal" @click="add">新增任务</el-button>
    </div>

    <div style="width: 100%;height:90%">
            <div style="display: flex;width: 100%">
                <div id="two" style="width: 49%;margin-right: 10px">
                  <el-table :data="tableDataTwo" stripe border style="width: 100%" row-key="id"
                            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" default-expand-all>
                    <el-table-column prop="id" label="ID" sortable width="70px" v-if="false"/>
                    <el-table-column prop="user" label="用户名"  v-if="false"/>
                    <el-table-column prop="name" label="重要不紧急任务"  />
                    <el-table-column prop="ddl" label="截止日期" />
                    <el-table-column prop="progress" label="进度" width="70px" >
                      <template #default="scope">
                          <span>{{getProgressLabel(scope.row.progress)}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="245px">
                      <template #default="scope">
                        <el-button  size="small" text type="primary"  @click="addSubTask(scope.row)">新增</el-button>
<!--                        <el-button  size="small"  text type="primary" @click="handleEdit(scope.row)">编辑</el-button>-->
                        <el-popconfirm title="确认删除吗？" @confirm="handleDelete(scope.row.id)">
                          <template #reference>
                            <el-button size="small"  text  type="danger">删除</el-button>
                          </template>
                        </el-popconfirm>
                        <el-button  size="small"   type="success" @click="finishTask(scope.row)"  v-if="scope.row.progress!='2'">完成</el-button>
                        <el-button  size="small"   type="primary" @click="startTask(scope.row)" v-if="scope.row.progress=='0'">开始</el-button>
                        <el-button  size="small"   type="primary" @click="stopTask(scope.row)" v-if="scope.row.progress=='1'">暂停</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div id="one" style="width: 50%;font-weight: bolder">
                  <el-table :data="tableDataOne" stripe border style="width: 100%" row-key="id"
                            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" default-expand-all>
                    <el-table-column prop="id" label="ID" sortable width="70px" v-if="false"/>
                    <el-table-column prop="user" label="用户名"  v-if="false"/>
                    <el-table-column prop="name" label="重要紧急任务"  />
                    <el-table-column prop="ddl" label="截止日期" />
                    <el-table-column prop="progress" label="进度" width="70px" >
                      <template #default="scope">
                        <span>{{getProgressLabel(scope.row.progress)}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="245px">
                      <template #default="scope">
                        <el-button  size="small" text type="primary"  @click="addSubTask(scope.row)">新增</el-button>
<!--                        <el-button  size="small"  text type="primary" @click="handleEdit(scope.row)">编辑</el-button>-->
                        <el-popconfirm title="确认删除吗？" @confirm="handleDelete(scope.row.id)">
                          <template #reference>
                            <el-button size="small"  text  type="danger">删除</el-button>
                          </template>
                        </el-popconfirm>
                        <el-button  size="small"   type="success" @click="finishTask(scope.row)"  v-if="scope.row.progress!='2'">完成</el-button>
                        <el-button  size="small"   type="primary" @click="startTask(scope.row)" v-if="scope.row.progress=='0'">开始</el-button>
                        <el-button  size="small"   type="primary" @click="stopTask(scope.row)" v-if="scope.row.progress=='1'">暂停</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
            </div>
            <div style="display: flex;width: 100%;height:50%;margin-top: 30px">
                <div id="four" style="width: 49%;margin-right: 10px">
                  <el-table :data="tableDataFour" stripe border style="width: 100%" row-key="id"
                            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" default-expand-all>
                    <el-table-column prop="id" label="ID" sortable width="70px" v-if="false"/>
                    <el-table-column prop="user" label="用户名"  v-if="false"/>
                    <el-table-column prop="name" label="不重要紧急任务"  />
                    <el-table-column prop="ddl" label="截止日期" />
                    <el-table-column prop="progress" label="进度" width="70px" >
                      <template #default="scope">
                        <span>{{getProgressLabel(scope.row.progress)}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="245px">
                      <template #default="scope">
                        <el-button  size="small" text type="primary"  @click="addSubTask(scope.row)">新增</el-button>
<!--                        <el-button  size="small"  text type="primary" @click="handleEdit(scope.row)">编辑</el-button>-->
                        <el-popconfirm title="确认删除吗？" @confirm="handleDelete(scope.row.id)">
                          <template #reference>
                            <el-button size="small"  text  type="danger">删除</el-button>
                          </template>
                        </el-popconfirm>
                        <el-button  size="small"   type="success" @click="finishTask(scope.row)"  v-if="scope.row.progress!='2'">完成</el-button>
                        <el-button  size="small"   type="primary" @click="startTask(scope.row)" v-if="scope.row.progress=='0'">开始</el-button>
                        <el-button  size="small"   type="primary" @click="stopTask(scope.row)" v-if="scope.row.progress=='1'">暂停</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div id="three" style="width: 50%;">
                  <el-table :data="tableDataThree" stripe border style="width: 100%" row-key="id"
                            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" default-expand-all>
                    <el-table-column prop="id" label="ID" sortable width="70px" v-if="false"/>
                    <el-table-column prop="user" label="用户名"  v-if="false"/>
                    <el-table-column prop="name" label="不重要不紧急任务"  />
                    <el-table-column prop="ddl" label="截止日期" />
                    <el-table-column prop="progress" label="进度" width="70px" >
                      <template #default="scope">
                        <span>{{getProgressLabel(scope.row.progress)}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="245px">
                      <template #default="scope">
                        <el-button  size="small" text type="primary"  @click="addSubTask(scope.row)">新增</el-button>
<!--                        <el-button  size="small"  text type="primary" @click="handleEdit(scope.row)">编辑</el-button>-->
                        <el-popconfirm title="确认删除吗？" @confirm="handleDelete(scope.row.id)">
                          <template #reference>
                            <el-button size="small"  text  type="danger">删除</el-button>
                          </template>
                        </el-popconfirm>
                        <el-button  size="small"   type="success" @click="finishTask(scope.row)" v-if="scope.row.progress!='2'">完成</el-button>
                        <el-button  size="small"   type="primary" @click="startTask(scope.row)" v-if="scope.row.progress=='0'">开始</el-button>
                        <el-button  size="small"   type="primary" @click="stopTask(scope.row)" v-if="scope.row.progress=='1'">暂停</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
            </div>
    </div>


    <el-dialog v-model="dialogVisible" title="新增任务" width="40%">
      <el-form  :model="form" label-width="120px">
        <el-form-item label="任务名称(必填)" style="width: 80%;">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="重要紧急程度(必选)" style="width: 80%;">
          <el-select v-model="form.importance" placeholder="请选择重要紧急程度">
            <el-option
              v-for="item in importanceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="任务详情" style="width: 80%;">
          <el-input v-model="form.detail" type="textarea" rows="3"/>
        </el-form-item>
        <el-form-item label="排序" style="width: 80%;">
          <el-input v-model="form.orderNum"  type="number"/>
        </el-form-item>
        <el-form-item label="截止时间" style="width: 80%;">
           <el-date-picker
            v-model="form.ddl"
            type="datetime"
            placeholder="选择日期时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="相关人" style="width: 80%;">
          <el-input v-model="form.associatedPerson"  />
        </el-form-item>
        <el-form-item label="估算时间(分钟)" style="width: 80%;">
          <el-input v-model="form.estimatedTime" type="number" />
        </el-form-item>
        <el-form-item label="进度" style="width: 80%;">
          <el-select v-model="form.progress" placeholder="请选择进度">
            <el-option
                v-for="item in progressOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save()">确定</el-button>
        </div>
      </template>
    </el-dialog>


    <el-dialog v-model="subTaskDialogVisible" title="新增子任务" width="40%">
      <el-form  :model="form" label-width="120px">
        <el-form-item label="父任务" style="width: 80%;">
          <el-input v-model="form.fatherName" disabled/>
        </el-form-item>
        <el-form-item label="任务名称(必填)" style="width: 80%;">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="任务详情" style="width: 80%;">
          <el-input v-model="form.detail" type="textarea" rows="3"/>
        </el-form-item>
        <el-form-item label="排序" style="width: 80%;">
          <el-input v-model="form.orderNum"  type="number"/>
        </el-form-item>
        <el-form-item label="截止时间" style="width: 80%;">
          <el-date-picker
              v-model="form.ddl"
              type="datetime"
              placeholder="选择日期时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="相关人" style="width: 80%;">
          <el-input v-model="form.associatedPerson"  />
        </el-form-item>
        <el-form-item label="估算时间(分钟)" style="width: 80%;">
          <el-input v-model="form.estimatedTime" type="number" />
        </el-form-item>
        <el-form-item label="进度" style="width: 80%;">
          <el-select v-model="form.progress" placeholder="请选择进度">
            <el-option
                v-for="item in progressOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="subTaskDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveSubTask()">确定</el-button>
        </div>
      </template>
    </el-dialog>

  </div>

</template>

<script>


import request from "@/utils/request";
import moment from 'moment';

export default {
  name: 'TaskView',
  components: {
  },
  data(){
    return{
      subTaskDialogVisible:false,
      journalDialogVisible:false,
      journals:null,
      form:{},
      user:{},
      dialogVisible:false,
      date: new Date(),
      tableDataOne: [],
      tableDatatwo: [],
      tableDataThree: [],
      tableDataFour: [],
      shortcuts : [
        {text: '今天', value: new Date(),},
        {text: '昨天', value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date
          },
        },
        {text: '一周前', value: () => {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date
          },
        },
      ],
      journalRules:{
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' },
        ]
      },
      journalForm:{},
      importanceOptions:[
        {"label":"重要紧急","value":"one"},
        {"label":"重要不紧急","value":"two"},
        {"label":"不重要紧急","value":"four"},
        {"label":"不重要不紧急","value":"three"},
      ],
      progressOptions:[
          {"label":"未开始","value":"0"},
          {"label":"进行中","value":"1"},
          {"label":"已完成","value":"2"},
      ]
    }
  },
  computed: {
    formattedDate() {
      // 将currentDate转换为指定格式的字符串
      return moment(this.date).format('YYYY-MM-DD');
    }
  },
  created(){
    let userStr= sessionStorage.getItem("user") || "{}"
    let user = JSON.parse(userStr)
    this.user=user;
    this.load();
  },
  methods:{
    load(){
      //加载信息
      request.get("/task",{
        params:{
          username:this.user.username,
        }
      }).then(res =>{
        console.log(res)
        this.tableDataOne = res.data.one
        this.tableDataTwo = res.data.two
        this.tableDataThree = res.data.three
        this.tableDataFour = res.data.four
      })

    },
    saveSubTask(){
      this.form.user=this.user.username
      request.post("/task/addSub",this.form).then(res =>{
        console.log(res)
        if(res.code==0){
          this.$message.success("新增子任务成功");
          this.subTaskDialogVisible=false;
          this.load();
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    addSubTask(row){
      this.form={};//清空一下表单域
      let id = row.id
      this.subTaskDialogVisible=true
      this.form.father = id
      this.form.fatherName = row.name
      console.log(this.form)
    },
    add(){
      this.dialogVisible=true
      this.form={};//清空一下表单域
      this.form.orderNum=999
      this.form.progress="未开始"
    },
    getProgressLabel(progress){
      let obj = this.progressOptions.find(item=>item.value==progress)
      if(obj){
        return  obj.label
      }else{
        return "未填"
      }
    },
    save(){
      this.form.user=this.user.username
      if(this.form.id){ //更新
        request.put("/task",this.form).then(res =>{
          console.log(res)
          if(res.code==0){
            this.$message.success("更新成功");
            this.dialogVisible=false;
            this.load();
          }else{
            this.$message.error(res.msg);
          }
        })
      }else{ //新增
        request.post("/task",this.form).then(res =>{
          console.log(res)
          if(res.code==0){
            this.$message.success("新增成功");
            this.dialogVisible=false;
            this.load();
          }else{
            this.$message.error(res.msg);
          }
        })
      }

    },
    handleEdit(row){
      this.form = JSON.parse(JSON.stringify(row)) //深度拷贝
      this.dialogVisible=true;
    },
    handleDelete(id){
      console.log(id)
      request.delete("/task/"+id).then(res =>{
        console.log(res)
        if(res.code==0){
          this.$message.success("删除成功");
          this.load();
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    finishTask(row){
      request.get("/task/done",{
        params:{
          id:row.id,
        }
      }).then(res =>{
        console.log(res)
        if(res.code==0){
          this.$message.success("更新状态成功");
          this.load();
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    startTask(row){
      request.get("/task/start",{
        params:{
          id:row.id,
        }
      }).then(res =>{
        console.log(res)
        if(res.code==0){
          this.$message.success("启动成功");
          this.load();
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    stopTask(row){
      request.get("/task/stop",{
        params:{
          id:row.id,
        }
      }).then(res =>{
        console.log(res)
        if(res.code==0){
          this.$message.success("暂停成功");
          this.load();
        }else{
          this.$message.error(res.msg);
        }
      })
    },
  }
}
</script>
